window.addEventListener('load', function () {
    // 图片定时滚动，无缝滚动
    // 小圆点跟随图片滚动
    // 手指拖动轮播图
    // 手指滑动滚动下一张
    // 图片回弹效果
    // 返回顶部

    var focus = this.document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    var w = focus.offsetWidth;
    var subnav = document.querySelector('.subnav-entry');
    var goback = document.querySelector('.goback');
    // console.log(w);
    var index = 0;
    // ul.style.left = translatex + 'px;'
    // 1.图片定时滚动
    var timer = setInterval(function () {
        index++;
        // console.log(index);
        var translatex = -index * w;
        // console.log(translatex);
        ul.style.transition = 'all.5s';
        ul.style.transform = 'translateX(' + translatex + 'px)';

    }, 2000);
    // 2.图片无缝滚动
    ul.addEventListener('transitionend', function () {
        // console.log(index);
        if (index >= 3) {
            index = 0;
            var translatex = -index * w;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            var translatex = -index * w;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // console.log(index);
        // 3.图片随之滚动
        circleScroll();


    })
    // 4.滑动手指图片滑动
    var startx = 0;
    var x = 0;
    var movex = 0;
    ul.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        startx = e.targetTouches[0].pageX;
        x = -index * w;
        // console.log(startx);
    })
    ul.addEventListener('touchmove', function (e) {
        movex = e.targetTouches[0].pageX - startx;
        console.log(movex);
        var translatex = -index * w + movex;
        ul.style.transform = 'translateX(' + translatex + 'px)';
    })
    // 松开手指，图片滚动到下一张或着原来的那一张
    ul.addEventListener('touchend', function (e) {
        // console.log('touchend:' + Math.abs(movex));
        if (Math.abs(movex) <= 50) {
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else {
            if (movex > 0) {
                index--;
                index = index < 0 ? 2 : index;
            } else {
                index++;
                index = index >= 3 ? 0 : index;

            }
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 4.3小圆点随之滚动
        circleScroll();

        timer = setInterval(function () {
            index++;
            // console.log(index);
            var translatex = -index * w;
            // console.log(translatex);
            ul.style.transition = 'all.5s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);

    })
    // 5.返回顶部
    window.addEventListener('scroll', function (e) {
        e.preventDeffault;
        var top = subnav.offsetTop;
        if (window.pageYOffset >= top) {
            goback.style.display = 'block';
        } else {
            goback.style.display = 'none';
        }
        goback.addEventListener('click', function (e) {
            e.preventDefault();
            animate(window, 0);
        })

    })
    function circleScroll() {
        // 3.小圆点随之滚动
        // ol中带有current的li删除类名
        ol.querySelector('.current').classList.remove('current');
        // ol中为索引号为index的li添加current类名
        // ul.style.transition = 'all .5s';
        ol.children[index].classList.add('current');
    }


})



